<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工信息</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="layer/layer.js"></script>

    <style>
        .layui-table-cell{
            height:60px;
            line-height:60px;
        }
        th .layui-table-cell {
            height: 30px;
            line-height: 30px;
        }

        th .laytable-cell-1-0-7 {
            height: 30px;
            line-height: 30px;
        }
    </style>

    <script type="text/html" id="barDemo2">
        <button class="layui-btn" lay-event="bianji" id="bianji" ><i class="layui-icon layui-icon-edit"></i>编辑</button>
    </script>

    <script type="text/html" id="buttonTpl">
        <div style="text-align: center;margin: auto;width: 106px;height: 42px;margin-top: 12px">
            {{#  if(d.status == 1){ }}
            <button class="layui-btn" style="float: left;background-color: #5FB878" id="qiyong" onclick="qiyong(this)">启用</button>
            <div style="height: 38px;width: 30px;border: gainsboro solid 1px;float: left;line-height:38px; text-align:center;border-left: none">
                <i id="gouzi" class="layui-icon layui-icon-ok" style="color: #5FB878"></i>
            </div>
            {{#  } else { }}
            <button class="layui-btn layui-btn-primary" style="float: left" id="qiyong" onclick="qiyong(this)">启用</button>
            <div style="height: 38px;width: 30px;border: gainsboro solid 1px;float: left;line-height:38px; text-align:center;border-left: none">
                <i id="gouzi" class="layui-icon" style="color: #5FB878"></i>
            </div>
            {{#  } }}
        </div>
    </script>
</head>
<body>
    <div class="layui-input-block">
        <input type="text" style="height: 45px;width: 210px;font-size: 17px;float: left;margin-top: 7px" id="searchname" required  lay-verify="required" placeholder="请输入员工/物业名称" autocomplete="off" class="layui-input">
        <button type="button" id="searchbtn" class="layui-btn" style="height: 50px;width: 80px;float:left;margin-top: 5px;margin-left: 10px">
            <i class="layui-icon layui-icon-search" style="font-size: 25px"></i>
        </button>
    </div>

    <div style="margin-top: 45px">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>

</body>

<script>
    var $=layui.$;

    layui.use('table', function() {
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: "/getstaff"
            , title: '物业数据表'
            , cols: [[
                {field: 'id', title: '序号', width: 80,height:70, fixed: 'left', unresize: true,sort:true,type:"numbers"
                    // ,templet: "#titleTpl"
                    // ,templet: function(d){
                    //     return d.id
                    // }
                }
                ,{field:'propertyname', title: '所属物业',width:170,height:70,
                    templet:function (d) {
                        console.log(d);
                        return d.propertyinfo.propertyname;
                    }}
                , {field: 'staffname', title: '员工名字', width: 170,height:70, edit: 'text'}
                , {field: 'age', title: '年龄', width: 170,height:70, edit: 'text'}
                , {field: 'entrytime', title: '入职时间',width: 170,height:70, templet: "<div>{{layui.util.toDateString(d.entrytime)}}</div>"}
                , {field: 'status', title: '是否离职',templet:'#buttonTpl', width: 170,height:70,align:'center'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo2', width: 170,height:70}
            ]]
            , page: true
            ,done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                // console.log(res);
                //得到当前页码
                //console.log(curr);
                //得到数据总量
                // console.log(count);
            }
        });

        $('.layui-btn').click(function () {
            var searchname = $('#searchname');
            table.reload('test', {
                url:"/getstaff"
                ,where: {
                    searchname: searchname.val()
                }
                ,page: {
                    curr: 1
                }
            });
        })

        //监听事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var tr=obj.tr;
            var page=obj.curr;
            layer.open({
                type: 2,
                title: '编辑',
                shadeClose: true,
                shade: 0.6,
                content: '/getedit?id='+data.id,
                area: ['850px', '810px'],
                cancel: function(index, layero){
                    let currpage = $('.layui-laypage-em').next().text();
                    table.reload('test', {
                        page: {
                            curr: currpage
                        }
                    });
                    obj.update ({
                        propertyname:'123'
                    });
                }
            });
        });

        table.on('edit(test)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            $.ajax({
                type: "POST",
                url: "/updateby",
                data: {id:data.id, columname:field,value:value},
                dataType: "text",
                success: function(data){
                    if (data=="1"){
                        layer.msg('修改成功');
                    }else{
                        layer.msg("修改失败");
                    }
                }
            });
        });

    });
</script>
</html>